<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增子用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

</head>
<script type="text/javascript" src="/ztree/js/jquery-1.4.4.min.js"></script>
<link rel="stylesheet" href="/ztree/css/demo.css" type="text/css">
<link rel="stylesheet" href="/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="/css/common.css" media="all">
<script type="text/javascript" src="/ztree/api/apiCss/jquery.ztree.core.js"></script>
<link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<body>
<style type="text/css">
    .ztree li span.button.icon01_ico_docu {
        background: url(js/zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/img/index.png);
        margin-right: 2px;
        background-position: -110px -16px;
        vertical-align: top;
        no-repeat: scroll 0 0 transparent;
        vertical-align: top;
        *vertical-align: middle
    }

    .ztree li span.button.icon01_ico_open, .ztree li span.button.icon01_ico_close {
        background: url(js/zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/img/index.png);
        margin-right: 2px;
        background-position: -110px -16px;
        vertical-align: top;
        no-repeat: scroll 0 0 transparent;
        vertical-align: top;
        *vertical-align: middle
    }

    .formbox {
        height: 1px;
    }

    body {
        background-color: white;
    }
</style>
<div class="layui-row">
    <div class="layui-col-md2  formbox ">
    </div>

    <div class="layui-fluid layui-col-md8 layui-col-sm12 ">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;" class="layui-row">
                <form class="layui-form" action="" >
                    <div class="layui-form-item">
                        <label class="layui-form-label">负责人姓名:</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="name" required lay-verify="name" placeholder="请输入负责人姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-block">
                            <img id="headImg" src="" width="150px" height="100px"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系电话:</label>
                        <div class="layui-input-block">
                            <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" name="adminPhone"
                                   id="adminPhone" required
                                   lay-verify="adminPhone" placeholder="请输入电话号码" autocomplete="off" class="layui-input"
                                   maxlength="11">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码:</label>
                        <div class="layui-input-block">
                            <input type="password" name="adminPassword" id="adminPassword" required
                                   lay-verify="adminPassword"
                                   placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码:</label>
                        <div class="layui-input-block">
                            <input type="password" name="aginadminPassword" id="aginadminPassword" required
                                   lay-verify="aginadminPassword" placeholder="请再次输入密码" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级用户:</label>
                        <div class="layui-input-block">
                            <input type="text" id="shangjiuser" required lay-verify="shangjiuser" placeholder="请选择上级用户"
                                   autocomplete="off" class="layui-input" readonly='readonly'>
                            <div id="shangjibox" style="display:none; position: absolute;z-index: 100;">
                                <ul id='treeDemo' class='ztree'
                                    style='width: 177px;height: 160px; background: white;border:1px solid gray;overflow-y: scroll'></ul>
                            </div>
                        </div>
                        <div class="layui-form-mid layui-word-aux" id="wenziid" style="display: none"></div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="adminName" id="adminName" required lay-verify="adminName"
                                   placeholder="请输入用户昵称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色:</label>
                        <div class="layui-input-block">
                            <select name="server" id="server">
                                <option value="">请选择角色</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户性质:</label>
                        <div class="layui-input-block">
                            <select name="xinzhi" lay-verify="xinzhi" id="xinzhi">
                                <option value=""></option>
                                <option value="0">个人</option>
                                <option value="1">企业</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item layui-layout-admin">
                        <div class="layui-input-block">
                            <div class="layui-footer" style="left: 0;">
                                <button class="layui-btn" id="btnAdd"  lay-filter="demo1" lay-submit style="margin-left:10%;">
                                    添加
                                </button>
                                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-col-md2 formbox">

    </div>
</div>
</body>
</html>

<script>
    //Demo
        var fileName = null;
        var form = layui.form;
        var element=layui.element;
        var zTreeObj
        var a = null;
        var $ = layui.$;
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid',
                    rootPId: '0'
                }
            }
            ,
            callback: {
                onMouseDown: itemMouseDown //单击事件
            }
        }

        function itemMouseDown (event, treeId, treeNode) {
            $("#wenziid").html("");
            $("#shangjiuser").val("");
            if (treeNode) {
                $("#wenziid").html(treeNode.id)
                $("#shangjiuser").val(treeNode.name)
                $("#shangjibox").hide(1000);
            }
        }


        $(function () {
            $('#shangjiuser').click(function (event) {
                event.stopImmediatePropagation();//取消事件冒泡；
                $("#shangjibox").toggle('slow');
            });
            $(document).bind("click", function (e) {
                var target = $(e.target);
                if (target.closest("#shangjiuser,#shangjibox").length == 0) {/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
                    $("#shangjibox").fadeOut();
                };
                e.stopPropagation();
            })
        });

        form.on('submit(demo1)', function (data) {
            var re = /^1[34578]\d{9}$/;
            //监听提交
            if ($("#name").val() == "") {
                layer.msg("请填写负责人姓名", {icon: 2});
                return false;
            }
            if (re.test($("#adminPhone").val()) == false) {
                layer.msg("请确认电话号码", {icon: 2});
                return false;
            }
            if ($("#adminPassword").val() != $("#aginadminPassword").val()) {
                layer.msg("两次密码输入不一致", {icon: 2});
                $("#mima").val("两次密码输入不一致")
                return false;
            }
            if ($("#shangjiuser").val() == "") {

                layer.msg("上级用户不能为空", {icon: 2});
                return false;
            }
            if ($("#adminName").val() == "") {
                layer.msg("请输入昵称", {icon: 2});
                return false;
            }

            if ($("#server").val() == "") {
                layer.msg("请选择角色", {icon: 2});
                return false;
            }

            if ($("#xinzhi").val() == "") {
                layer.msg("请选择用户性质", {icon: 2});
                return false;
            }
            if (fileName == null) {
                layer.msg("请先选择图像", {icon: 2});
                return false;
            }
            $.ajax({
                method: 'post',
                url: '/admin/addser?adminName=' + $("#adminName").val() + "&adminParent=" + $("#wenziid").html() + "&adminType=" + $("#xinzhi option:selected").val() + "&adminHeadPortrait=" + fileName + "&adminPassword=" + $("#aginadminPassword").val() + "&adminPersonInCharge=" + $("#name").val() + "&adminPhone=" + $("#adminPhone").val() + "&adminMoney=" + 0 + "&roleId=" + $("#server").val(),
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg("添加成功", {
                            icon: 1
                        });
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        }, 1000);
                        return;
                    } else {
                        layer.msg(res.msg, {
                            icon: 2
                        });

                    }

                },
                error: function (res) {
                    layer.msg('服务器异常或网络原因', {
                        icon: 2
                    });
                }
            })
            return false
        })
        var upload = layui.upload;
        upload.render({
            elem: '#headImg',
            url: '/admin/fileinfo/upload/image',
            choose: function (obj) {
                fileName = null;
                //预览
                obj.preview(function (index, file, result) {
                    //$("#headImg").attr('src',result);
                    document.getElementById("headImg").src = result;
                });
            },
            done: function (res, index, upload) //上传完成
            {
                fileName = res.data; //传回来的新的文件名
            }
        });
        $("#adminPhone").blur(function () {

            var reg = /^1[34578]\d{9}jQuery/;
            if (!reg.test($("#adminPhone").val())) {
                $("#iphonered").html("*手机号码格式不正确")
            } else {
                $("#iphonered").html("")
            }
        });
        $.ajax({
            url: "/admin/role/selRole",
            type: "post",
            dataType: "json",
            success: function (result) {
                var list = result.data;    //返回的数据

                var server = document.getElementById("server"); //server为select定义的id
                for (var p in list) {

                    var option = document.createElement("option");  // 创建添加option属性
                    option.setAttribute("value", list[p].roleId); // 给option的value添加值
                    option.innerText = list[p].roleName;     // 打印option对应的纯文本
                    server.appendChild(option);           //给select添加option子标签
                    form.render("select");            // 刷性select，显示出数据
                }
            }
        });


    $(function () {

        $.ajax({
            type: 'get',
            url: '/admin/selectShujsonById',
            data:{
                token:layui.data("local_store").token
            },
            async: true,
            success: function (msg) {
                $ = jQuery.noConflict();
                a = eval(eval(msg).data)
                zTreeObj = $.fn.zTree.init($('#treeDemo'), setting, a)
            },

        })
    })


</script>
